<template>
  <div style="height: 100%">
    <div class="head">
      <div class="head-left">
        <b>目录类型</b>
        <div>
          <DxSelectBox
            width="150"
            :items="simpleProducts"
            height="30"
            stylingMode="outlined"
          />
        </div>
        <b>目录方案</b>
        <div>
          <DxSelectBox
            width="150"
            :items="simpleProducts"
            height="30"
            stylingMode="outlined"
          />
        </div>
        <b>显示</b>
        <div>
          <DxSelectBox
            width="150"
            :items="simpleProducts"
            height="30"
            stylingMode="outlined"
          />
        </div>
      </div>

      <div class="head-right">
        <b>查找</b>
        <div>
          <DxTextBox height="30" width="80%" stylingMode="outlined" />
        </div>
        <div>
          <DxButton text="定位" type="default" />
        </div>
        <div>
          <DxButton text="导出" type="default" />
        </div>
        <div>
          <DxButton text="保存" @click="test()" type="default" />
        </div>
        <div>
          <i class="el-icon-more"></i>
        </div>
      </div>
    </div>
    <el-row style="">
      <el-col class="content-left" :span="12">
        <div class="treeview-content">
          <div>
            <div class="treeview-content-tree-title">
              <DxCheckBox style="margin-left: 16px" />
              <b style="margin-left: 10px">全选</b>
            </div>
            <DxTreeView
              id="treeview"
              class="treeview"
              :ref="treeViewRef"
              :width="340"
              :items="employees"
              :show-check-boxes-mode="showCheckBoxesModeValue"
              :selection-mode="selectionModeValue"
              :select-nodes-recursive="selectNodesRecursiveValue"
              :select-by-click="selectByClickValue"
              @selection-changed="treeViewSelectionChanged"
              @content-ready="treeViewContentReady"
            >
              <template #item="item">
                {{ item.data.fullName + " (" + item.data.position + ")" }}
              </template>
            </DxTreeView>
          </div>
          <div>
            <div class="treeview-content-title">
              <span>对应规格</span>
            </div>
            <div>
              <DxDataGrid
                id="grid-container"
                :data-source="dataSource"
                :show-borders="true"
                :remote-operations="false"
                height="800px"
                showRowLines="true"
              >
                <DxPaging :enabled="false" />
                <DxScrolling column-rendering-mode="virtual" />
                <DxSorting mode="none" />
                <DxColumn
                  :allow-editing="false"
                  data-field="City"
                  cell-template="cellTemplate"
                  caption="全选"
                  alignment="center"
                />
                <DxColumn data-field="ID" caption="编码" alignment="center" />
                <DxColumn
                  data-field="CompanyName"
                  caption="药品品种"
                  alignment="center"
                />
                <DxColumn data-field="CompanyName" caption="规格" alignment="center" />
                <template #cellTemplate="">
                  <div class="cellTemplate">
                    <DxCheckBox style="margin-left: 16px" v-model:value="isselect" />
                  </div>
                </template>
              </DxDataGrid>
            </div>
          </div>
        </div>
      </el-col>

      <el-col class="content-right" :span="12">
        <div class="contnt-center-content">
          <el-button type="primary"><i class="el-icon-caret-right"></i></el-button>
        </div>

        <div class="content-right-content">
          <div>
            <div class="content-right-title">
              <div><span>厂牌列表</span></div>
            </div>
            <div>
              <DxDataGrid
                id="grid-container"
                :data-source="dataSource"
                :show-borders="true"
                :remote-operations="false"
                height="350px"
                showRowLines="true"
              >
                <DxPaging :enabled="false" />
                <DxScrolling column-rendering-mode="virtual" />
                <DxSorting mode="none" />

                <DxColumn data-field="ID" caption="序号" alignment="center" />
                <DxColumn
                  data-field="CompanyName"
                  caption="厂牌名称"
                  alignment="center"
                />
                <DxColumn
                  data-field="CompanyName"
                  caption="批准文号"
                  alignment="center"
                />
                <DxColumn data-field="CompanyName" caption="状态" alignment="center" />
                <DxColumn data-field="CompanyName" caption="中标" alignment="center" />
                <DxColumn data-field="CompanyName" caption="指定" alignment="center" />
                <DxColumn
                  data-field="CompanyName"
                  caption="建档日期"
                  alignment="center"
                />
              </DxDataGrid>
            </div>
          </div>
          <div>
            <div class="content-right-title">
              <div style="width: 100%; display: flex; line-height: 30px">
                <b>供应商列表</b>
                <div style="width: 90%; text-align: center">
                  <el-button type="primary"
                    ><i class="el-icon-caret-bottom"></i
                  ></el-button>
                </div>
              </div>
            </div>
            <div>
              <DxDataGrid
                id="grid-container"
                :data-source="dataSource"
                :show-borders="true"
                :remote-operations="false"
                height="350px"
                showRowLines="true"
              >
                <DxPaging :enabled="false" />
                <DxScrolling column-rendering-mode="virtual" />
                <DxSorting mode="none" />

                <DxColumn data-field="ID" caption="序号" alignment="center" />
                <DxColumn
                  data-field="CompanyName"
                  caption="供应商名称"
                  alignment="center"
                />
                <DxColumn
                  data-field="CompanyName"
                  caption="供应商类型"
                  alignment="center"
                />
                <DxColumn data-field="CompanyName" caption="状态" alignment="center" />
                <DxColumn data-field="CompanyName" caption="指定" alignment="center" />
                <DxColumn
                  data-field="CompanyName"
                  caption="许可证号"
                  alignment="center"
                />
                <DxColumn
                  data-field="CompanyName"
                  caption="许可证有效期"
                  alignment="center"
                />
                <DxColumn
                  data-field="CompanyName"
                  caption="最近供应时间"
                  alignment="center"
                />
              </DxDataGrid>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <Edit
      v-if="isedit"
      v-model:isShow="isedit"
      @cancel="cancel()"
      @saveadd="saveadd()"
      @saveexit="saveexit()"
    />
  </div>
</template>

<script lang="ts">
import Edit from "./components/edit.vue";
import { Options, Vue } from "vue-class-component";
import { Inject, Watch } from "vue-property-decorator";
import DataSource from "devextreme/data/data_source";
import DxTabs from "devextreme-vue/tabs";
import Tree from "@/framework/components/tree/tree.vue";
import { ElRow, ElCol, ElCheckbox, ElIcon, ElButton } from "element-plus";
import DxSelectBox from "devextreme-vue/select-box";
import DxTreeView from "devextreme-vue/tree-view";
import DxCheckBox from "devextreme-vue/check-box";
import DxButton from "devextreme-vue/button";
import DxTabPanel from "devextreme-vue/tab-panel";
import DxTextBox from "devextreme-vue/text-box";
import {
  DxDataGrid,
  DxColumn,
  DxEditing,
  DxPaging,
  DxSearchPanel,
  DxExport,
  DxSorting,
  DxPager,
} from "devextreme-vue/data-grid";
@Options({
  components: {
    Edit,
    Tree,
    DxTabPanel,
    DxTabs,
    DxTreeView,
    ElRow,
    ElCol,
    ElCheckbox,
    DxSelectBox,
    DxCheckBox,
    DxDataGrid,
    DxColumn,
    DxEditing,
    DxPaging,
    DxSearchPanel,
    DxExport,
    DxSorting,
    DxPager,
    DxButton,
    ElIcon,
    ElButton,
    DxTextBox,
  },
})
export default class LabelSupply extends Vue {
  @Inject()
  formData: any;
  openTab = 0;
  isselect = false;
  employees = [
    {
      id: 1,
      fullName: "John Heart",
      prefix: "Dr.",
      position: "CEO",
      expanded: true,
      items: [
        {
          id: 2,
          fullName: "Samantha Bright",
          prefix: "Dr.",
          position: "COO",
          expanded: true,
          items: [
            {
              id: 3,
              fullName: "Kevin Carter",
              prefix: "Mr.",
              position: "Shipping Manager",
            },
            {
              id: 14,
              fullName: "Victor Norris",
              prefix: "Mr.",
              selected: true,
              position: "Shipping Assistant",
            },
          ],
        },
        {
          id: 4,
          fullName: "Brett Wade",
          prefix: "Mr.",
          position: "IT Manager",
          expanded: true,
          items: [
            {
              id: 5,
              fullName: "Amelia Harper",
              prefix: "Mrs.",
              position: "Network Admin",
            },
            {
              id: 6,
              fullName: "Wally Hobbs",
              prefix: "Mr.",
              position: "Programmer",
            },
            {
              id: 7,
              fullName: "Brad Jameson",
              prefix: "Mr.",
              position: "Programmer",
            },
            {
              id: 8,
              fullName: "Violet Bailey",
              prefix: "Ms.",
              position: "Jr Graphic Designer",
            },
          ],
        },
        {
          id: 9,
          fullName: "Barb Banks",
          prefix: "Mrs.",
          position: "Support Manager",
          expanded: true,
          items: [
            {
              id: 10,
              fullName: "Kelly Rodriguez",
              prefix: "Ms.",
              position: "Support Assistant",
            },
            {
              id: 11,
              fullName: "James Anderson",
              prefix: "Mr.",
              position: "Support Assistant",
            },
          ],
        },
      ],
    },
  ];
  longtabs = [
    { text: "门诊 ", id: "0" },
    { text: "住院", id: "1" },
  ];
  dataSource = [
    {
      ID: 1,
      CompanyName: "Premier Buy",
      Address: "7601 Penn Avenue South",
      City: "Richfield",
      State: "Minnesota",
      Zipcode: 55423,
      Phone: "(612) 291-1000",
      Fax: "(612) 291-2001",
      Website: "http =//www.nowebsitepremierbuy.com",
    },
    {
      ID: 2,
      CompanyName: "ElectrixMax",
      Address: "263 Shuman Blvd",
      City: "Naperville",
      State: "Illinois",
      Zipcode: 60563,
      Phone: "(630) 438-7800",
      Fax: "(630) 438-7801",
      Website: "http =//www.nowebsiteelectrixmax.com",
    },
    {
      ID: 3,
      CompanyName: "Video Emporium",
      Address: "1201 Elm Street",
      City: "Dallas",
      State: "Texas",
      Zipcode: 75270,
      Phone: "(214) 854-3000",
      Fax: "(214) 854-3001",
      Website: "http =//www.nowebsitevideoemporium.com",
    },
    {
      ID: 4,
      CompanyName: "Screen Shop",
      Address: "1000 Lowes Blvd",
      City: "Mooresville",
      State: "North Carolina",
      Zipcode: 28117,
      Phone: "(800) 445-6937",
      Fax: "(800) 445-6938",
      Website: "http =//www.nowebsitescreenshop.com",
    },
    {
      ID: 5,
      CompanyName: "Braeburn",
      Address: "1 Infinite Loop",
      City: "Cupertino",
      State: "California",
      Zipcode: 95014,
      Phone: "(408) 996-1010",
      Fax: "(408) 996-1012",
      Website: "http =//www.nowebsitebraeburn.com",
    },
    {
      ID: 6,
      CompanyName: "PriceCo",
      Address: "30 Hunter Lane",
      City: "Camp Hill",
      State: "Pennsylvania",
      Zipcode: 17011,
      Phone: "(717) 761-2633",
      Fax: "(717) 761-2334",
      Website: "http =//www.nowebsitepriceco.com",
    },
    {
      ID: 7,
      CompanyName: "Ultimate Gadget",
      Address: "1557 Watson Blvd",
      City: "Warner Robbins",
      State: "Georgia",
      Zipcode: 31093,
      Phone: "(995) 623-6785",
      Fax: "(995) 623-6786",
      Website: "http =//www.nowebsiteultimategadget.com",
    },
    {
      ID: 8,
      CompanyName: "EZ Stop",
      Address: "618 Michillinda Ave.",
      City: "Arcadia",
      State: "California",
      Zipcode: 91007,
      Phone: "(626) 265-8632",
      Fax: "(626) 265-8633",
      Website: "http =//www.nowebsiteezstop.com",
    },
    {
      ID: 9,
      CompanyName: "Clicker",
      Address: "1100 W. Artesia Blvd.",
      City: "Compton",
      State: "California",
      Zipcode: 90220,
      Phone: "(310) 884-9000",
      Fax: "(310) 884-9001",
      Website: "http =//www.nowebsiteclicker.com",
    },
    {
      ID: 10,
      CompanyName: "Store of America",
      Address: "2401 Utah Ave. South",
      City: "Seattle",
      State: "Washington",
      Zipcode: 98134,
      Phone: "(206) 447-1575",
      Fax: "(206) 447-1576",
      Website: "http =//www.nowebsiteamerica.com",
    },
    {
      ID: 11,
      CompanyName: "Zone Toys",
      Address: "1945 S Cienega Boulevard",
      City: "Los Angeles",
      State: "California",
      Zipcode: 90034,
      Phone: "(310) 237-5642",
      Fax: "(310) 237-5643",
      Website: "http =//www.nowebsitezonetoys.com",
    },
    {
      ID: 12,
      CompanyName: "ACME",
      Address: "2525 E El Segundo Blvd",
      City: "El Segundo",
      State: "California",
      Zipcode: 90245,
      Phone: "(310) 536-0611",
      Fax: "(310) 536-0612",
      Website: "http =//www.nowebsiteacme.com",
    },
    {
      ID: 13,
      CompanyName: "Super Mart of the West",
      Address: "702 SW 8th Street",
      City: "Bentonville",
      State: "Arkansas",
      Zipcode: 72716,
      Phone: "(800) 555-2797",
      Fax: "(800) 555-2171",
      Website: "http://www.nowebsitesupermart.com",
    },
    {
      ID: 14,
      CompanyName: "Electronics Depot",
      Address: "2455 Paces Ferry Road NW",
      City: "Atlanta",
      State: "Georgia",
      Zipcode: 30339,
      Phone: "(800) 595-3232",
      Fax: "(800) 595-3231",
      Website: "http =//www.nowebsitedepot.com",
    },
    {
      ID: 15,
      CompanyName: "K&S Music",
      Address: "1000 Nicllet Mall",
      City: "Minneapolis",
      State: "Minnesota",
      Zipcode: 55403,
      Phone: "(612) 304-6073",
      Fax: "(612) 304-6074",
      Website: "http =//www.nowebsitemusic.com",
    },
    {
      ID: 16,
      CompanyName: "Tom's Club",
      Address: "999 Lake Drive",
      City: "Issaquah",
      State: "Washington",
      Zipcode: 98027,
      Phone: "(800) 955-2292",
      Fax: "(800) 955-2293",
      Website: "http =//www.nowebsitetomsclub.com",
    },
    {
      ID: 17,
      CompanyName: "E-Mart",
      Address: "3333 Beverly Rd",
      City: "Hoffman Estates",
      State: "Illinois",
      Zipcode: 60179,
      Phone: "(847) 286-2500",
      Fax: "(847) 286-2501",
      Website: "http =//www.nowebsiteemart.com",
    },
    {
      ID: 18,
      CompanyName: "Walters",
      Address: "200 Wilmot Rd",
      City: "Deerfield",
      State: "Illinois",
      Zipcode: 60015,
      Phone: "(847) 940-2500",
      Fax: "(847) 940-2501",
      Website: "http =//www.nowebsitewalters.com",
    },
    {
      ID: 19,
      CompanyName: "StereoShack",
      Address: "400 Commerce S",
      City: "Fort Worth",
      State: "Texas",
      Zipcode: 76102,
      Phone: "(817) 820-0741",
      Fax: "(817) 820-0742",
      Website: "http =//www.nowebsiteshack.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
    {
      ID: 20,
      CompanyName: "Circuit Town",
      Address: "2200 Kensington Court",
      City: "Oak Brook",
      State: "Illinois",
      Zipcode: 60523,
      Phone: "(800) 955-2929",
      Fax: "(800) 955-9392",
      Website: "http =//www.nowebsitecircuittown.com",
    },
  ];
  /**是否显示添加诊疗信息 */
  isedit = false;
  test() {
    this.isedit = true;
  }
  /**取消回调 */
  cancel() {
    console.log(231231);
    this.isedit = false;
  }
  /**保存并退出回调 */
  saveexit() {}
  // 页面刷新
  refresh() {
    this.$router.replace({ path: "/refresh" });
  }
}
</script>

<style scoped lang="scss">
.grup-body {
  display: flex;
  justify-content: space-evenly;
}
.header-input {
  input {
    padding: 0 !important;
  }
}
.head {
  padding: 12px;
  line-height: 30px;
  height: 50px;
  background: white;
  box-shadow: 0px 0px 3px 0px #8b8b8b, 0px 20px 20px -20px #8b8b8b;
}
.dx-selectbox {
  line-height: 10px;
}
.head-left div,
.head-right div {
  margin-left: 10px;
  margin-right: 5x;
}
.head-left {
  display: flex;
  float: left;
}
.head-right {
  display: flex;
  float: right;
}
.content-left {
  background: rgb(223, 223, 223);
}
.contnt-center,
.content-right {
  background: rgb(223, 223, 223);
  display: flex;
}
.treeview {
  background: white; 
  height: "100%";
}
.treeview-content {
  margin-top: 1px;
  display: flex;
}
.treeview-content-tree-title {
  display: flex;
  background: white;
  padding: 10px;
  border-bottom: 1px solid rgb(205, 205, 205);
}
.treeview-content-title {
  padding: 5px;
}
.butdiv {
  padding: 10px;
  background: whitesmoke;
}

.content-right-title {
  padding: 15px 0px 5px 0px;
  display: flex;
}
.content-right-title-button {
  width: 90%;
  text-align: right;
}
.button-c3c3c3-margin10 {
  margin-left: 10px;
  margin-right: 10px;
  background: #c3c3c3;
}
.contnt-center-content {
  // position: fixed;
  // bottom: 50%;
  // left: 50%;
  line-height: 30;
  padding: 10px;
  width: 100px;
}
.butdiv-form {
  display: flex;
  line-height: 35px;
}
.butdiv-form div {
  margin-left: 10px;
  margin-right: 10px;
}
button{

        height: 40px;
    width: 40px;
    text-align: center;
    padding: 0;
}
</style>
